<template>
    <div class="card" style="margin-bottom:5px;padding: 30px">
        <el-table :data="data.tableData" :header-cell-style="{background:'#d6deec',color:'#000000'}" stripe height="90%" border="true">
            <el-table-column label="账号" prop="username" />
            <el-table-column label="联系方式" prop="phone" />
            <el-table-column label="交易地址" prop="transactionLocation" />
        </el-table>


        <!--                修改触发事件--在改变页码或者size的时候，重新加载顺序-->
        <el-pagination
                @current-change="load"
                @size-change="load"
                v-model:current-page="data.pageNum"
                v-model:page-size="data.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="data.total"
        />
    </div>


</template>

<script setup>

    import {ElMessage,ElMessageBox} from "element-plus"
    import { reactive,ref ,onMounted } from 'vue';
    import request from "@/utils/request";

    const data = reactive({
        name: null,
        tableData: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        FormVisible:false,
        form:{},
        ids:[],


    });


    const load = () => {
        request.get('/buyer/selectPage', {
            params: {
                pageNum: data.pageNum,
                pageSize: data.pageSize,
                name:data.name

            }
        }).then(res => {
            data.tableData = res.data.list
            data.total = res.data.total
        })
    }

    // 在组件初始化时加载第一页数据
    onMounted(() => {
        load()
    });
</script>

<style scoped>
    .avatar-uploader .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        text-align: center;
    }
</style>
